<template>
  <el-container class="allbody" onscroll="false">
    <!-- <el-header style="height: 10.5%" class="headerbackgroud">
      <div
        style="
          color: white;
          font-size: 30px;
          text-align: center;
          margin-top: 20px;
          margin-left: 70px;
        "
      >
        典型工业设备和产品检测监测云服务平台
      </div>
      <el-card
        style="
          width: 150px;
          height: 50px;
          text-align: left;
          margin-left: 80px;
          margin-top: -30px;
          border-radius: 30px;
          background-color: #7d93ea;
        "
      >
        <div style="color: white; margin-left: 6px; margin-top: -10px">
          中国特种设备检测研究院
        </div>
      </el-card>
      <el-card
        style="
          width: 127px;
          height: 60px;
          align-items: right;
          margin-left: 1600px;
          margin-top: -30px;
          border-radius: 30px;
          background-color: #7d93ea;
        "
      >
        <div style="color: white; margin-left: 2px; margin-top: -8px">
          {{ dateFormat(date) }}
        </div>
      </el-card>
      <el-card
        style="
          width: 150px;
          height: 50px;
          align-items: right;
          margin-left: 1400px;
          margin-top: -60px;
          border-radius: 30px;
          background-color: #7d93ea;
        "
      >
        <div style="color: white; margin-left: 2px; margin-top: -8px">
          云服监管
        </div>
      </el-card>
    </el-header> -->

    <el-main style="height: 100%; z-index: 5">
      <!--<Calendar-->
      <!--v-on:choseDay="clickDay"-->
      <!--v-on:changeMonth="changeDate"-->
      <!--&gt;</Calendar>-->
      <el-row style="width: 100%; height: 10%">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin-top: 20px; margin-left: 10px"
        >
          <el-form-item>
            <el-input
              v-model="Unit"
              class="form-input"
              style="width: 500px"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item style="position: absolute; right: 20%">
            <i class="el-icon-back" style="color: black; font-size: 25px"></i>
            <el-button
              type="text"
              style="color: black; font-size: 22px"
              @click="switchList"
              >返回上一级</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
      <el-row> </el-row>
      <el-row style="width: 100%; height: 90%">
        <el-tabs v-model="activeName" @tab-click="clickTab()">
          <el-tab-pane label="检验机构监管" name="first">
            <el-table
              :data="table_check"
              style="
          width:80%
            height: 98%;
          "
              fit
              height="750"
            >
              <el-table-column prop="Id" label="序号" width="70">
              </el-table-column>
              <el-table-column prop="t001" label="检验机构"> </el-table-column>
              <el-table-column prop="t002" label="机构地址"> </el-table-column>
              <el-table-column prop="t003" label="核准证编号">
              </el-table-column>
              <el-table-column prop="t004" label="检验范围"> </el-table-column>
              <el-table-column prop="t005" label="有效期"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="使用单位监管" name="second">
            <el-table
              :data="sydwTableData"
              style="
          width:100%
            height: 98%;
          "
              fit
              height="800"
            >
              <el-table-column prop="Id" label="序号" width="70">
              </el-table-column>
              <el-table-column prop="f032" label="使用单位"> </el-table-column>
              <el-table-column prop="equCount" label="设备总量">
              </el-table-column>
              <el-table-column prop="highCount" label="高风险设备量">
              </el-table-column>
              <el-table-column prop="mediumCount" label="中风险设备量">
              </el-table-column>
              <el-table-column prop="lowCount" label="低风险设备量">
              </el-table-column>
              <el-table-column prop="riskLevel" label="单位风险等级">
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @size-change="sydwPageSizeChange"
              @current-change="sydwPageChange"
              :current-page="sydwCurrentPage"
              :page-sizes="[15, 30, 50, 80]"
              :page-size="sydwPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="sydwTotal"
              style="margin-top: 20px"
            >
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="起重机械监管" name="third">
            <el-table
              :data="equTableData"
              style="
          width:100%
            height: 98%;
          "
              fit
              height="800"
            >
              <el-table-column prop="Id" label="序号" width="70">
              </el-table-column>
              <el-table-column prop="f001" label="设备代码"> </el-table-column>
              <el-table-column prop="f032" label="使用单位"> </el-table-column>
              <el-table-column prop="f037" label="企业编号"> </el-table-column>
              <el-table-column prop="qzl" label="起重量"> </el-table-column>
              <el-table-column prop="f099" label="工作级别"> </el-table-column>
              <el-table-column prop="f061" label="使用年限"> </el-table-column>
              <el-table-column prop="f048" label="定检结果"> </el-table-column>
              <el-table-column prop="riskValue" label="风险值">
              </el-table-column>
              <el-table-column prop="riskLevel" label="设备风险等级">
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @size-change="equPageSizeChange"
              @current-change="equPageChange"
              :current-page="equCurrentPage"
              :page-sizes="[15, 30, 50, 80]"
              :page-size="equPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="equTotal"
              style="margin-top: 20px"
            >
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import ElContainer from "element-ui/packages/container/src/main";
import ElAside from "element-ui/packages/aside/src/main";
import ElHeader from "element-ui/packages/header/src/main";
import ElMain from "element-ui/packages/main/src/main";

import { get, get as userType, del, dels } from "@/api/sys/connSysAuthApi";
import { parseTime } from "@/utils";
import { req } from "@/api/base/BaseApi";

import Calendar from "vue-calendar-component";
const allEquList = require("./equ_list.json");
const allSydwList = require("./sydw_list.json");
export default {
  name: "index",
  components: { Calendar },
  props: {
    checkUnit: String,
  },
  comments: {
    ElMain,
    ElHeader,
    ElAside,
    ElContainer,
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    switchList() {
      this.$emit("switchList");
    },
    tableRowStyle({ row, rowIndex }) {
      return "background-color: #02152f;color: #fff";
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #2ec7c9;color: #fff;font-weight: 500;";
      }
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    getTableDataFormSon(data) {
      const tableDataTemp = data;
      this.tableData = [];
      for (let j = 9; j >= 0; j--) {
        const tableDataI = {};
        for (let i = 0; i < this.measurePoints.length; i++) {
          const point = this.measurePoints[i];
          const values = tableDataTemp.get(point);
          const date = new Date(values[j].name);
          if (i <= 0) {
            tableDataI["time"] =
              date.getFullYear() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getDate() +
              " " +
              date.getHours() +
              ":" +
              date.getMinutes() +
              ":" +
              date.getSeconds();
          }
          tableDataI[point + "value"] = values[j].value;
        }
        this.tableData.push(tableDataI);
      }
      this.currTableData = [];
      for (let i = 0; i < this.measurePoints.length; i++) {
        const point = this.measurePoints[i];
        const values = tableDataTemp.get(point);
        const date = new Date(values[values.length - 1].name);
        this.currTableData.push({
          point: point,
          data: values[values.length - 1].value,
          time:
            date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(),
        });
      }
    },
    show() {},
    yearChange(id, type) {
      this.year = id;
    },
    monthChange(id, type) {
      this.month = id;
    },
    dayChange(id, type) {
      this.day = id;
    },
    clickTab() {
      console.log(this.activeName);
      if(this.activeName=='second'){
        this.showSydw();
      }else if(this.activeName=='third'){
        this.showEqu();
      }
    },
    // 获取检验报告的时间列表
    async searchDateList() {},

    // 获取设备列表
    showEqu() {
      setTimeout(() => {
        const list = allEquList.slice(
          +this.equSearchArgs.offset,
          +this.equSearchArgs.offset + +this.equSearchArgs.num
        );
        for (const index in list) {
          list[index].Id = +index + 1 + this.equSearchArgs.offset;
        }
        this.equTableData = list;
        this.equTotal = allEquList.length;
      }, 450);
    },
    // 获取单位列表
    showSydw() {
      setTimeout(() => {
        const list = allSydwList.slice(
          +this.sydwSearchArgs.offset,
          +this.sydwSearchArgs.offset + +this.sydwSearchArgs.num
        );
        for (const index in list) {
          list[index].Id = +index + 1 + this.sydwSearchArgs.offset;
        }
        this.sydwTableData = list;
        this.sydwTotal = allSydwList.length;
      }, 450);
    },
    // 页面大小改变
    async equPageSizeChange(pageSize) {
      this.equPageSize = +pageSize;
      this.equCurrentPage = 1;
      this.equSearchArgs.offset = 0;
      this.equSearchArgs.num = pageSize;
      // 获取数据
      this.showEqu();
    },
    // 页数改变
    async equPageChange(page) {
      this.equCurrentPage = page;
      this.equSearchArgs.offset = (page - 1) * this.equSearchArgs.num;
      // 获取数据
      this.showEqu();
    },
    // 页面大小改变
    async sydwPageSizeChange(pageSize) {
      this.sydwPageSize = +pageSize;
      this.sydwCurrentPage = 1;
      this.sydwSearchArgs.offset = 0;
      this.sydwSearchArgs.num = pageSize;
      // 获取数据
      this.showSydw();
    },
    // 页数改变
    async sydwPageChange(page) {
      this.sydwCurrentPage = page;
      this.sydwSearchArgs.offset = (page - 1) * this.sydwSearchArgs.num;
      // 获取数据
      this.showSydw();
    },
  },
  async created() {},
  computed: {
    Unit() {
      return "监管单位：" + this.checkUnit;
    },
  },
  data() {
    return {
      date: new Date(),
      EquValue: "一钢轧 008",
      SydwValue: "马鞍山钢铁股份有限公司",
      timeOption: [], // 检验报告的时间列表。一份检验报告一个时间
      timeValue: "", // 当前选中的检验报告时间
      detailData: "", // 当前显示的检验报告数据
      year: "",
      month: "",
      day: "",
      mydate: "",
      calendar: {},
      tableData: [],
      activeName: "first",
      table_check: [
        {
          Id: "1",
          t001: "中国特种设备检测研究院",
          t002: "",
          t003: "",
          t004: "",
          t005: "",
        },
        {
          Id: "2",
          t001: "山东省特种设备检验研究院有限公司",
          t002: "",
          t003: "",
          t004: "",
          t005: "",
        },
        {
          Id: "3",
          t001: "青岛市特种设备检验检测研究院",
          t002: "",
          t003: "",
          t004: "",
          t005: "",
        },
        {
          Id: "4",
          t001: "铜陵市特种设备监督检验中心",
          t002: "",
          t003: "",
          t004: "",
          t005: "",
        },
      ],
      table_use: [
        {
          Id: "1",
          t001: "铜陵有色金属集团股份有限公司动力厂",
          t002: "31",
          t003: "12年",
          t004: "100t",
          t005: "高",
        },
        {
          Id: "2",
          t001: "安徽金誉材料股份有限公司",
          t002: "23",
          t003: "11年",
          t004: "800t",
          t005: "中",
        },
        {
          Id: "3",
          t001: "铜陵有色兴铜机电制造有限公司",
          t002: "16",
          t003: "9年",
          t004: "600t",
          t005: "低",
        },
        {
          Id: "4",
          t001: "铜陵有色金属集团股份有限公司金昌冶炼厂",
          t002: "7",
          t003: "8年",
          t004: "500t",
          t005: "低",
        },
        {
          Id: "5",
          t001: "铜陵有色金属集团股份有限公司动力厂",
          t002: "7",
          t003: "9年",
          t004: "200t",
          t005: "低",
        },
      ],
      table_equ: [
        {
          Id: "1",
          t001: "",
          t002: "",
          t003: "铜陵有色兴铜机电制造有限公司",
          t004: "铜陵市铜官大道中段277号",
          t005: "",
        },
        {
          Id: "2",
          t001: "",
          t002: "",
          t003: "铜陵有色金属集团股份有限公司金昌冶炼厂",
          t004: "铜陵市枞阳县连城工业园区",
          t005: "",
        },
        {
          Id: "3",
          t001: "",
          t002: "",
          t003: "铜陵有色金属集团股份有限公司金昌冶炼厂",
          t004: "铜陵市经开区黄山大道198号",
          t005: "",
        },
      ],

      equTotal: 0,
      equPageSize: 15,
      equCurrentPage: 1,
      equTableData: [],
      equSearchArgs: {
        offset: 0,
        num: 15,
      },
      sydwTotal: 0,
      sydwPageSize: 15,
      sydwCurrentPage: 1,
      sydwTableData: [],
      sydwSearchArgs: {
        offset: 0,
        num: 15,
      },
    };
  },
  filters: {
    userTypeFilter(type) {
      let typeText = type;
      userTypes.forEach((val) => {
        if (type === val.value) {
          typeText = val.name;
        }
      });
      return typeText;
    },
    menuFilter(ids) {
      let length = 0;
      if (ids) {
        length = ids.length;
      }
      return length;
    },
    dateTimeFilter(time) {
      return parseTime(time);
    },
  },
  mounted() {
    let _this = this; //声明一个变量指向vue实例this,保证作用域一致
    (this.timer = setInterval(function () {
      _this.date = new Date(); //修改数据date
    }, 1000)),
      console.log(this.$route.path); // 输出当前页面的路由，如：/home
  },
};
</script>

<style lang="less" scoped>
.headerbackgroud {
  // background-image: url("../../../../assets/screen-header.jpg");
}
.allbody {
  width: 100%;
  height: 1050px;
  // background-image: url("../../../../assets/bg.jpg");
}
.rowclass {
  width: 100%;
  height: 50%;
}
.form-input /deep/ .el-input__inner {
  color: rgb(0, 0, 0) !important;
}
#text {
  -webkit-text-fill-color: white;
}
.select {
  color: white;
}
.hello {
  // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
  /deep/ input::-webkit-input-placeholder {
    color: #fff;
  }
  /deep/ input::-moz-input-placeholder {
    color: #fff;
  }
  /deep/ input::-ms-input-placeholder {
    color: #fff;
  }

  //修改的是el-input的样式
  //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
  //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner {
    background-color: #08164d;
    color: #fff;
    border: 0px;
    border-radius: 0px;
    text-align: center;
  }
}
.map1,
.map2,
.map3 {
  position: absolute;
  opacity: 0.5;
}
.map1 {
  margin-left: 580px;
  margin-top: 230px;
  z-index: 2;
  animation: myfirst2 15s infinite linear;
}
.map2 {
  margin-left: 625px;
  margin-top: 275px;
  z-index: 3;
  opacity: 0.2;
  animation: myfirst 10s infinite linear;
}
.map3 {
  margin-left: 650px;
  margin-top: 300px;
  z-index: 1;
}
@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
</style>
